<template>
  <div class="recommend" v-if="setIsShow">
    <div class="banner">
      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
        <van-swipe-item v-for="item in banner" :key="item.id">
          <img :src="item.img" alt />
        </van-swipe-item>
      </van-swipe>
    </div>
    <div class="activity">
      <img v-for="item in activity" :key="item.id" :src="item.img" alt />
    </div>
    <div class="hot">
      <img :src="hot[0].img" alt />
      <div class="hot-right">
        <img :src="hot[1].img" alt />
        <img :src="hot[2].img" alt />
      </div>
    </div>
    <div class="discovery">
      <img :src="hot[3].img" alt />
    </div>
    <div class="selected">
      <img :src="hot[4].img" alt />
    </div>
    <div class="phone">
      <div v-for="item in phone" :key="item.product_id">
        <img :src="item.img" alt />
        <h4>{{item.product_name}}</h4>
        <p>{{item.product_brief}}</p>
        <p>
          <span>
            ￥{{item.product_price}}
            <i>起</i>
          </span>
          <span
            v-if="item.product_price===item.product_org_price ? false:true"
          >￥{{item.product_org_price}}</span>
        </p>
        <button>立即购买</button>
      </div>
      <div class="more">更过小米手机产品&nbsp;></div>
    </div>
    <div class="tv">
      <div class="tv-top">
        <img :src="tv.top.img" alt />
      </div>
      <div class="tvs">
        <div v-for="item in tv.tvs" :key="item.product_id">
          <img :src="item.img_url_webp" alt />
          <h4>{{item.product_name}}</h4>
          <p>{{item.product_brief}}</p>
          <p>
            <span>
              ￥{{item.product_price}}
              <i>起</i>
            </span>
            <span
              v-if="item.product_price===item.product_org_price ? false:true"
            >￥{{item.product_org_price}}</span>
          </p>
          <button>立即购买</button>
        </div>
        <div class="more">更过小米电视产品&nbsp;></div>
      </div>
    </div>
    <div class="computer">
      <div class="computer-top">
        <img :src="computer.top[0].img_url_webp" alt />
        <img :src="computer.top[1].img_url_webp" alt />
      </div>
      <div class="computers">
        <div v-for="item in computer.computers" :key="item.product_id">
          <img :src="item.img_url_webp" alt />
          <h4>{{item.product_name}}</h4>
          <p>{{item.product_brief}}</p>
          <p>
            <span>
              ￥{{item.product_price}}
              <i>起</i>
            </span>
            <span
              v-if="item.product_price===item.product_org_price ? false:true"
            >￥{{item.product_org_price}}</span>
          </p>
          <button>立即购买</button>
        </div>
        <div class="more">更过小米笔记本产品&nbsp;></div>
      </div>
    </div>
    <div class="airWashing">
      <div class="airWashing-top">
        <img :src="airWashing.top[0].img_url_webp" alt />
        <img :src="airWashing.top[1].img_url_webp" alt />
      </div>
      <div class="airWashings">
        <div v-for="item in airWashing.machine" :key="item.product_id">
          <img :src="item.img_url_webp" alt />
          <h4>{{item.product_name}}</h4>
          <p>{{item.product_brief}}</p>
          <p>
            <span>
              ￥{{item.product_price}}
              <i>起</i>
            </span>
            <span
              v-if="item.product_price===item.product_org_price ? false:true"
            >￥{{item.product_org_price}}</span>
          </p>
        </div>
        <div class="more">更过米家家电产品&nbsp;></div>
      </div>
    </div>
    <div class="goods">
      <div class="goods-top">
        <img :src="goods.top[0].img_url_webp" alt />
        <img :src="goods.top[1].img_url_webp" alt />
      </div>
      <div class="goods-detail" v-for="item in goods.machine" :key="item.product_id">
        <img :src="item.img_url_webp" alt />
        <div>
          <h4>{{item.product_name}}</h4>
          <p>{{item.product_brief}}</p>
          <p>
            <span>
              ￥{{item.product_price}}
              <i>起</i>
            </span>
            <span
              v-if="item.product_price===item.product_org_price ? false:true"
            >￥{{item.product_org_price}}</span>
          </p>
        </div>
      </div>
      <div class="more">更过米家智能产品&nbsp;></div>
    </div>
    <div class="pros">
      <img v-for="item in various.pros" :src="item.img_url_webp" :key="item.material_id" alt="">
    </div>
    <div class="oldToNew">
      <img :src="hot[5].img" alt="">
      <div class="more">了解小米&nbsp;></div>
    </div>
  </div>
</template>

<script>
import { get, post } from "@/api/http";
import Vue from "vue";
import { Swipe, SwipeItem } from "vant";

Vue.use(Swipe);
Vue.use(SwipeItem);
export default {
  data() {
    return {
      banner: [],
      activity: [],
      hot: [],
      phone: [],
      tv: { top: {}, tvs: [] },
      computer: { top: [], computers: [] },
      airWashing: { top: [], machine: [] },
      goods: { top: [], machine: [] },
      various: { pros: [] },
      isShow: false
    };
  },
  computed: {
    setIsShow() {
      if (
        this.banner.length !== 0 &&
        this.activity.length !== 0 &&
        this.hot.length !== 0 &&
        this.phone.length !== 0 &&
        this.tv.tvs.length !== 0 &&
        this.computer.computers.length !== 0 &&
        this.airWashing.machine.length !== 0 &&
        this.goods.machine.length !== 0 &&
        this.various.pros.length !==0
      ) {
        return (this.isShow = true);
      }
    }
  },
  async created() {
    let res = await get("data/banner.json");
    // console.log(res.data);
    this.banner = res.data;
    let res2 = await get("data/activity.json");
    // console.log(res2.data);
    this.activity = res2.data;
    let res3 = await get("data/hot.json");
    // console.log(res3.data);
    this.hot = res3.data;
    let res4 = await get("data/phone.json");
    // console.log(res4.data);
    this.phone = res4.data;
    let res5 = await get("data/tv.json");
    // console.log(res5.data);
    this.tv = res5.data;
    let res6 = await get("data/computer.json");
    // console.log(res6.data);
    this.computer = res6.data;
    let res7 = await get("data/air_WashingMachine.json");
    // console.log(res7.data);
    this.airWashing = res7.data;
    let res8 = await get("data/goods.json");
    // console.log(res8.data);
    this.goods = res8.data;
    let res9 = await get("data/various.json");
    // console.log(res9.data);
    this.various = res9.data;
  }
};
</script>

<style lang="scss" scoped>
.recommend {
  overflow: auto;
}
.banner {
  margin-top: 3px;
  .my-swipe .van-swipe-item {
    color: #fff;
    text-align: center;
    img {
      width: 100%;
    }
  }
}
.activity {
  display: flex;
  flex-wrap: wrap;
  img {
    width: 20%;
    display: block;
  }
}
.hot {
  display: flex;
  justify-content: space-between;
  margin-top: 8px;
  img {
    width: 186px;
    height: 265px;
    display: block;
  }
  .hot-right {
    display: flex;
    flex-direction: column;
    img {
      height: 132px;
    }
  }
}
.discovery,
.selected {
  width: 100%;
  margin-top: 8px;
  img {
    width: 100%;
    display: block;
  }
}
.phone,
.tvs,
.computers,
.airWashings {
  display: flex;
  flex-wrap: wrap;
  padding: 0 6px;
  background: white;
  .more {
    height: 52px;
    text-align: center;
    line-height: 52px;
    width: 100%;
    color: rgba(0, 0, 0, 0.6);
    font-size: 14px;
    margin-top: 10px;
  }
  div {
    width: 49%;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 8px;
    &:nth-child(odd) {
      margin-right: 5px;
    }
    img {
      width: 100%;
    }
    h4 {
      font-weight: 400;
      color: rgba(0, 0, 0, 0.87);
      font-size: 14px;
      line-height: 14px;
      padding-top: 10px;
      width: 100%;
      text-align: center;
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;
    }
    p {
      font-size: 12px;
      color: rgba(0, 0, 0, 0.54);
      margin-top: 3px;
      span {
        i {
          font-size: 12px;
          font-style: normal;
        }
        &:first-child {
          color: #ea625b;
          font-size: 14px;
        }
        &:nth-child(2) {
          margin-left: 3px;
          text-decoration: line-through;
        }
      }
    }
    button {
      background: #ea625b;
      border: none;
      font-size: 12px;
      font-weight: 600;
      color: #fff;
      width: 85px;
      height: 30px;
      border-radius: 3px;
      margin-top: 3px;
    }
  }
}
.tv,
.computer {
  margin-top: 8px;
}
.tv .tv-top {
  width: 100%;
  img {
    width: 100%;
  }
}
.computer .computer-top {
  width: 100%;
  img {
    width: 100%;
  }
}
.airWashing{
  margin-top: 8px;
}
.airWashings {
  div {
    display: block;
    h4 {
      text-align: left;
    }
  }
}
.airWashing .airWashing-top {
  width: 100%;
  img {
    width: 100%;
  }
}
.goods .goods-top {
  width: 100%;
  margin-bottom: 8px;
  img {
    width: 100%;
  }
}
.goods{
  margin-top: 8px;
  .more {
    height: 52px;
    text-align: center;
    line-height: 52px;
    width: 100%;
    color: rgba(0, 0, 0, 0.6);
    font-size: 14px;
    margin-top: 10px;
    border-top: 2px solid #D1D1D1;
  }
  div{
    &:nth-child(3){
      div{
        float: left;
      }
    }
  }
}
.goods-detail{
  width: 100%;
  img{
    width: 50%;
  }
  div{
    width: 50%;
    float: right;
    padding: 33px 6px 0 17px;
    box-sizing: border-box;
    h4 {
      font-weight: 400;
      color: rgba(0, 0, 0, 0.87);
      font-size: 14px;
      line-height: 14px;
      padding-top: 10px;
      width: 100%;
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;
    }
    p {
      font-size: 12px;
      color: rgba(0, 0, 0, 0.54);
      margin-top: 3px;
      span {
        i {
          font-size: 12px;
          font-style: normal;
        }
        &:first-child {
          color: #ea625b;
          font-size: 14px;
        }
        &:nth-child(2) {
          margin-left: 3px;
          text-decoration: line-through;
        }
      }
    }
  }
}
.pros{
  width: 100%;
  margin-top: 8px;
  overflow: hidden;
  img{
    width: 49.5%;
    display: block;
    margin-bottom: 2px;
    &:nth-child(odd){
      float: left;
    }
    &:nth-child(even){
      float: right;
    }
  }
}
.oldToNew{
  width: 100%;
  margin-top: 8px;
  img{
    width: 100%;
  }
  .more {
    height: 52px;
    text-align: center;
    line-height: 52px;
    width: 100%;
    color: rgba(0, 0, 0, 0.6);
    font-size: 14px;
    margin-top: 10px;
    border-top: 2px solid #D1D1D1;
    border-bottom: 8px solid #EAEAEA;
  }
}
</style>